<template>
    <!-- 全屏容器 -->
    <v-scale-screen width="1920" height="1080" fullScreen>
      <div class="container">
        <!-- 查看大图容器 -->
        <div class="imgwrap" v-if="isShowImg">
          <img
            @click="viewBack"
            class="close"
            src="../assets/image/close.png"
            alt=""
          />
          <img :src="bigPic" alt="" />
        </div>
        <!-- 标题栏部分 -->
        <AiHeader></AiHeader>
        <div class="box-container">
          <!-- 学校信息 -->
          <div class="box-left-one">
            <ChartBox title="门店信息">
              <div
                class="logo"
                style="padding: 10px; display: flex; align-items: center"
              >
                <img src="../assets/image/ai-online-bg.b2e53f92.png" alt="" />
                <div style="color: white">
                  <div class="shop">
                    <div class="school">合肥经贸旅游学校</div>
                  </div>
                  <div class="head">
                    <div>责任人：<span>刘丽丽</span></div>
                  </div>
                  <div class="phone">
                    <div>联系方式：<span>0551-65972830</span></div>
                  </div>
                </div>
              </div>
            </ChartBox>
          </div>
          <!-- 天气预报 -->
          <div class="box-left-whea">
            <ChartBox :title="formattedDate">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  height: 100%;
                  font-size: 14px;
                "
              >
                <div class="wheaItem" style="padding: 10px 0 0 15px">
                  <div
                    class="time"
                    style="
                      font-size: 40px;
                      color: rgb(86, 181, 249);
                      font-weight: bolder;
                      margin-bottom: 40px;
                      margin-top: 20px;
                    "
                  >
                    13:47:02
                  </div>
                  <div class="wea">
                    <div class="wea-sunny">
                      <i class="el-icon-sunny"></i>
                      <span>晴天</span>
                    </div>
                    <span>23℃-36℃</span>
                  </div>
                  <div class="wea">
                    <div class="wea-sunny">
                      <i class="el-icon-light-rain"></i>
                      <span>湿度40%</span>
                    </div>
                    <span>南风3-4级</span>
                  </div>
                </div>
                <div class="wheaItem">
                  <Chart width="100%" height="98%" :option="ChartWeather"></Chart>
                </div>
              </div>
            </ChartBox>
          </div>
          <div class="box-left-three">
            <ChartBox title="平面图">
              <div>
                <img
                  style="width: 100%; height: 100%"
                  src="../assets/image/address.jpg"
                  alt=""
                />
              </div>
            </ChartBox>
          </div>
          <!-- 温湿度监控 -->
          <div class="box-left-two">
            <ChartBox title="温度湿度监控">
              <div style="height: 100%">
                <div style="display: flex; margin-top: 5px; margin-left: 10px;align-items: center;">
                  <template v-if="switchValue">
                    <div
                      class="icon"
                      style="
                        display: flex;
                        width: 35px;
                        height: 35px;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid rgb(71, 238, 249);
                      "
                    >
                      <img
                        src="../assets/image/temp.png"
                        style="width: 18px; height: 18px"
                      />
                    </div>
                    <div v-for="(item, index) in tempArr" :key="index">
                      <div
                        class="theTop"
                        style="
                          margin-left: 5px;
                          padding: 3px 10px;
                          height: 34px;
                          color: rgb(71, 238, 249);
                          font-size: 12px;
                          background-color: rgb(17, 40, 54);
                          border-radius: 5px;
                          display: flex;
                          flex-direction: column;
                          justify-content: space-between;
                        "
                      >
                        <div>{{ item.name }}</div>
                        <div>{{ item.num }}℃</div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      class="icon"
                      style="
                        display: flex;
                        width: 35px;
                        height: 35px;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid rgb(71, 238, 249);
                      "
                    >
                      <img
                        src="../assets/image/humidity.png"
                        style="width: 18px; height: 18px"
                      />
                    </div>
                    <div v-for="(item, index) in humidityArr" :key="index">
                      <div
                        class="theTop"
                        style="
                          margin-left: 5px;
                          padding: 3px 10px;
                          height: 34px;
                          color: rgb(71, 238, 249);
                          font-size: 12px;
                          background-color: rgb(17, 40, 54);
                          border-radius: 5px;
                          display: flex;
                          flex-direction: column;
                          justify-content: space-between;
                        "
                      >
                        <div>{{ item.name }}</div>
                        <div>{{ item.num }} %rh</div>
                      </div>
                    </div>
                  </template>
                  <el-switch
                    @change="swichChange()"
                    style="margin-left: 30px;margin-right: 50px;"
                    v-model="switchValue"
                    active-text="温度"
                    inactive-text="湿度"
                    inactive-color="#13ce66"
                    active-color="#ff4949"
                    class="custom-switch"
                  >
                  </el-switch>
                  <el-radio-group v-model="addressRadio" @change="addressChange">
                    <el-radio label="仓库">仓库</el-radio>
                    <el-radio label="面点房">面点房</el-radio>
                    <el-radio label="前厅">前厅</el-radio>
                    <el-radio label="白案">白案</el-radio>
                  </el-radio-group>
                </div>
                <Chart
                  width="100%"
                  height="95%"
                  :option="ChartTemperature"
                ></Chart>
              </div>
            </ChartBox>
          </div>
          <!-- AI设备 -->
          <div class="box-right-one">
            <ChartBox title="智能AI监控">
              <el-tree
                :default-expand-all="true"
                icon-class="el-icon-s-unfold"
                @node-click="play"
                class="filter-tree"
                :props="defaultProps"
                :data="datas"
                ref="tree"
              >
              </el-tree>
            </ChartBox>
          </div>
          <!-- 视频监控 -->
          <div class="center-top">
            <ChartBox title="视频监控">
              <template v-slot:selectBox>
                <div class="title-box">
                  <el-checkbox
                    @change="changeCheckbox"
                    v-model="checked"
                    style="color: #fff"
                    >本地监控视频播放</el-checkbox
                  >
                </div>
              </template>
  
              <div class="one">
                <jessibucaDemo
                  v-if="checked"
                  style="width: 100%; height: 100%"
                  :url="currentImg"
                />
  
                <img
                  :src="currentImg || defaultImgB"
                  v-else
                  @error="handleBImageError"
                />
              </div>
            </ChartBox>
          </div>
          <!-- 证件表格 -->
          <div class="center-buttom">
            <TabPane :tableTeight="tableTeight"></TabPane>
          </div>
          <!-- 抓拍部分 -->
          <div class="box-right-three">
            <ChartBox title="预警抓拍">
              <div class="right-ul">
                <div v-for="(item, index) in Snap" :key="index">
                  <div class="right-li">
                    <div class="Title">
                      <div>{{ item.title }}</div>
                      <i
                        @click="viewLargeImage(item.img)"
                        class="el-icon-rank"
                      ></i>
                    </div>
                    <img class="img" :src="item.img" alt="" />
                    <div class="time">抓拍时间：{{ item.time }}</div>
                    <div class="name">
                      抓拍地点：{{ item.chid }}（{{ item.address }}）
                    </div>
                  </div>
                </div>
              </div>
            </ChartBox>
          </div>
        </div>
      </div>
    </v-scale-screen>
  </template>
  <script>
  import ChartBox from "../components/chartBox.vue";
  import Chart from "../components/chart.vue";
  import AiHeader from "../components/aiHeader.vue";
  import TabPane from "../components/tabPane.vue";
  import * as echarts from "echarts";
  import "echarts-liquidfill";
  import {
    getAiBox,
    getShopImage,
    getShopChannelImgs,
    getTemperature,
  } from "../api/api";
  
  export default {
    data() {
      return {
        tableTeight:'520',
        addressRadio: '仓库',
        currentDate: new Date(),
        temperature: 12,
        ChartWeather: {},
        TemperatureDate: [], //温度日期
        tempDate: [],
        TemperatureVal: [], //温度数值
        WetDate: [], //湿度数值
        switchValue: true,
        tempArr: [
          { num: 28, name: "最高温度" },
          { name: "最低温度", num: 0 },
        ],
        humidityArr: [
          { name: "最高湿度", num: 100 },
          { name: "最低湿度", num: 0 },
        ],
        checked: false, //视频流是否开启
        bigPic: "",
        isLocal: "", //是否是本地
        index: 0,
        videoList: [],
        currentImg: "",
        defaultImgB: "",
        defaultImg: "",
        currentVideo: [],
        imageRequestData: {
          page: 1,
        },
        timer: null, //定时器
        indexs: -1,
        isShowImg: false,
        arr: [],
        datas: [],
        Snap: [],
        rowStyle: {
          color: "#666",
          fontSize: "12px",
          height: "32px",
        },
        interval: "",
        Chartone: {}, //图表配置项（各通道抓拍图片数量统）
        ChartTemperature: {}, //图表配置项（温度）
        SensingChartDate: {}, //其他感测数据
        // 设备状态
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },
    computed: {
      formattedDate: function () {
        var year = this.currentDate.getFullYear();
        var month = this.currentDate.getMonth() + 1;
        var day = this.currentDate.getDate();
        var weekdays = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        var weekday = weekdays[this.currentDate.getDay()];
        return year + "年" + month + "月" + day + "日 " + weekday;
      },
    },
    methods: {
      addressChange(val){
        console.log(val,'r');
      },
      swichChange() {
        this.tempDate = this.switchValue ? this.TemperatureVal : this.WetDate;
        this.setTemperature();
      },
      handleImageError() {
        this.defaultImg = "http://aibigscreen.ufoodlife.cn/img/nosignal1.png"; // 图片加载错误时，将src属性绑定到默认的无信号图片路径
      },
      handleBImageError() {
        this.defaultImgB = "http://aibigscreen.ufoodlife.cn/img/nosignal2.png"; // 图片加载错误时，将src属性绑定到默认的无信号图片路径
      },
      // checkbox的change事件
      changeCheckbox(e) {
        this.index = 0;
        this.indexs = -1;
        this.checked = e;
        if (this.checked) {
          this.currentVideo = [];
        } else {
          this.currentVideo = [];
          this.getAiBox();
        }
      },
      // 播放异常 重新拉流
      pullFlow() {},
      // 播放事件
      play(a) {
        this.index++;
        if (a.children) {
          this.index = 0;
          this.indexs = -1;
          Array.prototype.push.apply(this.videoList, a.children);
        } else {
          this.indexs++;
          this.currentImg = !this.checked ? a.channel_image : a.flv_url;
          if (this.index < 5) {
            this.currentVideo.splice(this.index - 1, 1, this.currentImg);
          } else {
            this.indexs = 3;
            this.currentVideo.splice(
              this.currentVideo.length - 1,
              1,
              this.currentImg
            );
          }
        }
      },
      // 树状节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      setTemperature() {
        this.ChartTemperature = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255,255,255,0)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(255,255,255,1)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          },
          grid: {
            top: "18%",
            left: "1%",
            right: "1%",
            bottom: "18%",
            // containLabel: true
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: true,
              axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,0.4)",
                },
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: "#d1e6eb",
                  margin: 15,
                },
                // rotate: -35,
              },
              axisTick: {
                show: false,
              },
              data: this.TemperatureDate,
            },
          ],
          yAxis: [
            {
              type: "value",
              min: 0,
              // max: 140,
              splitNumber: 4,
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,0.1)",
                },
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: false,
                margin: 20,
                textStyle: {
                  color: "#d1e6eb",
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "注册总量",
              type: "line",
              // smooth: true, //是否平滑曲线显示
              // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbolSize: 4,
              lineStyle: {
                normal: {
                  color: "#6c50f3", // 线条颜色
                },
                borderColor: "#f0f",
              },
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#fff",
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(255,255,255,1)",
                },
              },
              tooltip: {
                show: false,
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0,150,239,0.3)",
                      },
                      {
                        offset: 1,
                        color: "rgba(0,253,252,0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: this.tempDate,
            },
          ],
        };
      },
      setChartWeather() {
        this.ChartWeather = {
          title: [
            {
              text: "TEMP",
              x: "center",
              top: "54%",
              textStyle: {
                color: "#fdf914",
                fontSize: 9,
                fontWeight: "100",
              },
            },
            {
              text: `${this.temperature}℃`,
              x: "center",
              top: "42%",
              textStyle: {
                fontSize: "20",
                color: "#fdf914",
                fontFamily: "Lato",
                foontWeight: "600",
              },
            },
          ],
          polar: {
            radius: ["44%", "50%"],
            center: ["50%", "50%"],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              name: "",
              type: "bar",
              roundCap: true,
              barWidth: 60,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(66, 66, 66, .3)",
              },
              data: [this.temperature],
              coordinateSystem: "polar",
  
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "#fdf914",
                    },
                    {
                      offset: 1,
                      color: "#38a700",
                    },
                  ]),
                },
              },
            },
            {
              type: "gauge",
              name: "",
              radius: "60%",
              startAngle: "0",
              endAngle: "-359.99",
              splitNumber: "200",
              center: ["50%", "50%"],
              pointer: {
                show: false,
              },
              title: {
                show: false,
              },
              detail: {
                show: false,
              },
              data: [
                {
                  value: 95,
                  name: "",
                },
              ],
              axisLine: {
                lineStyle: {
                  width: 20,
                  opacity: 0,
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                length: 13,
                lineStyle: {
                  color: {
                    type: "linear",
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#111",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(66, 66, 66, 1)",
                      },
                      {
                        offset: 1,
                        color: "#111",
                      },
                    ],
                    globalCoord: false,
                  },
                  width: 1,
                  type: "solid",
                },
              },
              axisLabel: {
                show: false,
              },
            },
            {
              name: "",
              type: "pie",
              startAngle: 90,
              radius: ["60%", "62%"],
              hoverAnimation: false,
              center: ["50%", "50%"],
              itemStyle: {
                normal: {
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(66, 66, 66, .4)",
                  shadowBlur: 10,
                  shadowColor: "rgba(253, 249, 20, .3)",
                },
              },
              data: [
                {
                  value: 100,
                },
              ],
            },
            {
              name: "",
              type: "pie",
              startAngle: 90,
              radius: ["62.5%", "64%"],
              hoverAnimation: false,
              center: ["50%", "50%"],
              itemStyle: {
                normal: {
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(66, 66, 66, .3)",
                  shadowBlur: 10,
                  shadowColor: "rgba(253, 249, 20, .3)",
                },
              },
              data: [
                {
                  value: 100,
                },
              ],
            },
            {
              name: "",
              type: "pie",
              startAngle: 90,
              radius: ["64.5%", "65.8%"],
              hoverAnimation: false,
              center: ["50%", "50%"],
              itemStyle: {
                normal: {
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(66, 66, 66, .2)",
                  shadowBlur: 10,
                  shadowColor: "rgba(253, 249, 20, .3)",
                },
              },
              data: [
                {
                  value: 100,
                },
              ],
            },
            {
              name: "",
              type: "pie",
              startAngle: 90,
              radius: ["66.5%", "67.5%"],
              hoverAnimation: false,
              center: ["50%", "50%"],
              itemStyle: {
                normal: {
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(66, 66, 66, .1)",
                  shadowBlur: 10,
                  shadowColor: "rgba(253, 249, 20, .3)",
                },
              },
              data: [
                {
                  value: 100,
                },
              ],
            },
            {
              name: "",
              type: "custom",
              coordinateSystem: "none",
              renderItem: function (params, api) {
                return {
                  type: "arc",
                  shape: {
                    cx: api.getWidth() / 2,
                    cy: api.getHeight() / 2,
                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.545,
                    startAngle: ((0 + num) * Math.PI) / 180,
                    endAngle: ((1 + num) * Math.PI) / 180,
                  },
                  style: {
                    stroke: "#fdf914",
                    fill: "transparent",
                    lineWidth: 5,
                  },
                  silent: true,
                };
              },
              data: [0],
            },
          ],
        };
      },
      changIndex(e, i) {
        this.indexs = e;
        this.index = e;
      },
      // 查看大图
      viewLargeImage(url) {
        this.isShowImg = true;
        this.bigPic = url;
      },
      // 返回原图
      viewBack() {
        this.isShowImg = false;
      },
      // 获取设备状态和AI设备
      async getAiBox() {
        const res = await getAiBox();
        this.isLocal = res.data.data.aiboxInfo.is_local;
        // 树状结构
        this.datas = [
          {
            label: res.data.data.aiboxInfo.shop_name,
          },
        ];
        console.log(res.data.data.channel, "视频流");
        this.datas[0].children = res.data.data.channel.map((item, index) => {
          if (index < 4) {
            this.currentVideo.push(item.channel_image);
          }
          return {
            id: item.id,
            label: item.channel_name + "（" + item.channel_address + "）",
            flv_url: item.flv_url,
            channel_image: item.channel_image,
          };
        });
        this.setTwoChart();
        this.setTwoChart2();
      },
      // 获取抓拍图片
      async getImage() {
        const res = await getShopImage(this.imageRequestData);
        this.Snap = res.data.data.shopImgs.data.map((item, index) => {
          return {
            title: item.output_class_name,
            time: item.created_at,
            img: item.alarm_image,
            address: item.channel_address,
            chid: item.chid,
          };
        });
      },
      // 获取温温度数据getTemperature,getSmoke,getImmersionAmount
      async getTemperatures() {
        const res = await getTemperature();
        this.tempArr[0].num = res.data.data.max_temp;
        this.tempArr[1].num = res.data.data.min_temp;
        this.humidityArr[0].num = res.data.data.max_wet;
        this.humidityArr[1].num = res.data.data.min_wet;
        for (var i = 0; i < res.data.data.temp.date.length; i++) {
          var item = res.data.data.temp.date[i];
          var truncatedItem = item.substring(5, 10);
          this.TemperatureDate.push(truncatedItem);
        }
        this.TemperatureVal = res.data.data.temp.val;
        this.tempDate = this.TemperatureVal; //初始温度数值
        this.WetDate = res.data.data.wet.val;
        // 烟雾
        this.smogVal = res.data.data.smog.val;
        this.smogStatus = res.data.data.smog.status;
        this.smogAlertTimes = res.data.data.smog.alertTimes;
        // 浸水
        this.waterStatus = res.data.data.water.status;
        this.waterAlertTimes = res.data.data.water.alertTimes;
        this.waterDate = res.data.data.water.val / 100;
        this.setTemperature();
        this.setSensingChart();
        this.setSensingChart2();
      },
    },
    components: { ChartBox, Chart, AiHeader, TabPane },
    created() {
      this.getAiBox();
      this.getImage();
      this.setChartWeather();
      // this.getShopChannelImg();
      // setTimeout(() => {
      this.getTemperatures();
      // }, 500);
    },
    mounted() {
      this.timer = setInterval(() => {
        this.getAiBox();
        // this.getShopChannelImg();
      }, 30000);
    },
  
    beforeDestroy() {
      clearInterval(this.interval);
      clearInterval(this.timer);
      this.index = 0;
    },
  };
  </script>
  <style lang="scss" scoped>
  // 查看大图样式
  .imgwrap {
    height: 100vh;
    width: 100%;
    position: relative;
  
    .close {
      position: absolute;
      width: 50px;
      height: 50px;
      right: 10px;
      top: 10px;
    }
  
    img {
      width: 100%;
      height: 100%;
    }
  }
  
  .container // 滚动条样式
  
  ::-webkit-scrollbar-track-piece {
    background: rgb(1, 22, 55);
  }
  
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
  
  .container {
    height: 100%;
    width: 100%;
    background: url("../assets/image/bg.577ccc4c.jpg");
    .box-left-one {
      .logo {
        margin-top: 30px;
        img {
          width: 100px;
          height: 100px;
          margin-right: 25px;
        }
        .shop {
          .school {
            font-size: 18px;
            font-weight: bolder;
          }
        }
        .head span,
        .phone span{
          font-size: 14px;
          margin-right: 13px;
        }
      }
      .logo div {
        margin-bottom: 10px;
      }
    }
    .box-left-whea {
      .wheaItem {
        width: 49%;
        height: 100%;
        .wea {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0;
          .wea-sunny {
            display: flex;
            align-items: center;
            i {
              color: rgb(86, 181, 249);
              font-size: 26px;
              margin-right: 5px;
            }
          }
          span {
            color: white;
          }
        }
      }
    }
  }
  
  /* 中间 */
  .box-container {
    min-width: 1200px;
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template: repeat(3, 1fr) / repeat(5, 1fr);
    height: calc(100% - 130px);
  }
  
  .box-right-one {
    grid-area: 1/5/2/6;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
  
    // 树状图
    .filter-tree {
      color: #fff;
      font-size: 12px;
      width: calc(100% - 90px);
      margin: 0 auto;
      padding: 10px;
      max-height: 180px;
      overflow-y: scroll;
      background-color: transparent;
  
      ::v-deep .el-tree-node__expand-icon {
        font-size: 18px;
      }
    }
  }
  
  .box-left-two {
    grid-area: 3/2/4/5;
  }
  
  .box-left-three {
    grid-area: 3/1/4/2;
    overflow: hidden;
  }
  
  .center-top {
    grid-area: 2/5/3/6;
    // display: flex;
    overflow: hidden;
  
    .one {
      box-sizing: border-box;
      // flex: 1;
      width: 100%;
  
      margin: 0 auto;
      height: 100%;
      color: white;
      background-color: black;
      // border: 2px solid rgb(42, 48, 70);
  
      img {
        height: 100%;
        width: 100%;
        // object-fit: contain;
      }
    }
  }
  
  .center-buttom {
    grid-area: 1/2/3/5;
    display: flex;
    justify-content: space-between;
    color: white;
    border: 2px solid rgb(34, 77, 128);
    border-radius: 10px;
    padding: 0 10px;
  }
  
  .box-right-three {
    grid-area: 3/5/5/5;
    height: 95%;
    .right-ul {
      display: flex;
      padding: 2px 22px 0 15px;
      flex-direction: column;
      max-height: 98%;
      overflow-y: scroll;
  
      .right-li {
        width: 94%;
        padding: 2% 4%;
        background-image: url("../assets/image/img-backgroud.png");
  
        .Title {
          font-size: 14px;
          color: white;
          padding: 2px 4px 4px 4px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
  
        .img {
          width: 100%;
          height: 100%;
        }
  
        .time,
        .name {
          font-size: 13px;
          color: white;
        }
      }
    }
  }
  
  .currentBg {
    background: rgb(0, 228, 255) !important;
  }
  
  .noCurrentBg {
    color: white !important;
  }
  </style>
  <style lang="scss">
  // 表单格式
  ::v-deep .el-table {
    .el-table__body {
      height: 100%;
    }
  }
  .el-switch__label--left {
    color: rgb(99, 124, 160) !important;
    z-index: 11111;
  }
  .el-switch__label--right {
    color: rgb(99, 124, 160) !important;
    z-index: 1111;
  }
  .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  /* // 更改表头背景颜色 */
  .box-container .el-table thead tr > th {
    // border: 2px solid rgb(23,133,153);
    background-color: rgb(1, 52, 92);
  }
  .box-container .el-table thead {
    border: 2px solid rgb(25, 169, 184) !important;
    color: white;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: rgb(1, 52, 92) !important;
  }
  /* // 更改表格每行背景颜色 */
  .box-container .el-table tbody tr > td {
    background-color: rgb(1, 20, 49);
  }
  .box-container .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }
  /* // 设置鼠标经过时背景颜色 */
  .box-container .el-table tbody tr:hover > td {
    background-color: #fffff0 !important;
  }
  .box-container .el-table .el-table__cell {
    // border: 1px solid #999;
    padding: 5px 0;
  }
  .box-container .el-tabs .el-tabs__item {
    color: #a27b67 !important;
  }
  .box-container .el-tabs .el-tabs__item:hover {
    color: #a27b67 !important;
  }
  .el-tabs__active-bar {
    background-color: #a27b67 !important;
  }
  .box-container .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px !important;
  }
  .box-container .el-table__body-wrapper::-webkit-scrollbar-track-piece {
    background: rgb(1, 22, 55) !important;
  }
  .box-container .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
  .box-container .el-tabs {
    width: 100%;
    color: #fffff0;
  }
  .center-buttom .el-tab-pane .el-image {
    width: 40px;
    height: 40px;
  }
  
  .box-container .el-tabs .el-tabs__item {
    font-weight: bolder;
    color: #fff;
  }
  
  .box-container .el-tabs__item.is-active {
    color: #409eff;
  }
  // Card样式
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  
  .button {
    padding: 0;
    float: right;
  }
  
  .image {
    width: 50%;
    // display: block;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  
  .clearfix:after {
    clear: both;
  }
  .center-buttom .el-button {
    padding: 3px 4px;
  }
  </style>
  